<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>扫码支付</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{width:100%;height:100%;}
	/*-- 返回 --*/
	.ding_bg{
		height:52px;
		background-image: -moz-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
	}
	.ding_bg>p{text-align:center;color:#fff;float:left;width:calc(100% - 104px);line-height:52px;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}
	/*-- 返回 --*/
	/*-- 支付——兑换 按钮 --*/
	.zhidui_an>div{float:left;line-height:40px;width:50px;margin:0 calc(25% - 25px);text-align:center;font-size:20px;color:#666;}
	.zhidui_an_xz{border-bottom:2px solid #5a6ff3;padding-top:2px;line-height:36px!important;}
	/*-- 支付——兑换 按钮 --*/
	/*-- 支付——兑换 内容 --*/
	.zhidui_cont{height:calc(100% - 92px);background-color:#f2f2f2;}	
		/*支付*/
	.zhifu_box{padding:26px 26px 68px;}
	.zhifu_box>div{box-shadow:0 0 10px 0 rgba(207,207,207,.75);background-color:#fff;border-top-left-radius:5px;border-top-right-radius:5px;}
	.zhifu_box>div>ul>li:nth-of-type(1){background-color:#5a6ff3;border-top-left-radius:5px;border-top-right-radius:5px;}
	.zhifu_box>div>ul>li:nth-of-type(1)>div{width:100px;height:87px;margin:0 auto;background:url(__HOME__/img/shouzhang.png) no-repeat;background-size:100px 87px;}
	.zhifu_box>div>ul>li:last-of-type{padding:20px;text-align:center;line-height:40px;}
	.zhifu_box>div>ul>li:last-of-type >span{font-size:36px;display:inline-block;}
			/*输入金额*/
	.shuru_jine{width:260px;padding:20px calc(50% - 130px);border-bottom:4px solid #f0f0f0;}
	.shuru_jine>p{color:#666;font-size:12px;line-height:24px;}
	.shuru_jine>ol{height:50px;}
	.shuru_jine>ol>li:nth-of-type(1){float:left;width:20px;font-size:18px;line-height:50px;}
	.shuru_jine>ol>li:nth-of-type(2){float:left;width:calc(100% - 40px);}
	.shuru_jine>ol>li:nth-of-type(3){float:left;width:20px}
	.shuru_jine>ol>li>input{border:none;width:100%;height:50px;line-height:50px;font-size:36px;outline:none;text-indent:6px;}
	
	.clear_jine>div{background:url(__HOME__/img/tubiao_02.png) no-repeat;background-size:100px 100px;width:14px;height:14px;margin:18px auto;}
			/*输入金额*/
			/*红包-优惠券-积分*/
	.hb_yhq_jf{width:260px;padding:20px calc(50% - 130px);}
	.hb_yhq_jf>ol>li{border-bottom:1px solid #e4e3e4;line-height:40px;font-size:14px;}
	.hb_yhq_jf>ol>li>div:nth-of-type(1){
		float:left;height:18px;width:18px;background:url(__HOME__/img/tubiao_02.png);background-size:100px 100px;background-position-Y:-14px;margin:11px 0;
	}
	.hb_yhq_jf>ol>li>p{float:left;width:calc(50% - 9px);text-indent:8px;color:#666;}
	.hb_yhq_jf>ol>li>div:nth-of-type(2){float:left;width:calc(50% - 9px);text-align:right;color:#bbb;}
			/*红包-优惠券-积分*/
		/*支付*/
		/*兑换*/
	.duihuan_box{padding:0 0 68px!important;margin-top:6px;}
	.duihuan_box>div>div:nth-of-type(1){background-color:#546def;height:120px;}
	.duihuan_box>div>div>div:nth-of-type(1){width:100px;margin:0 auto;line-height:80px;}
	.duihuan_box>div>div>div:nth-of-type(1) >p:nth-of-type(1){
		float:left;width:14px;height:14px;background:url(__HOME__/img/tubiao_02.png) no-repeat;background-position-X:-14px;background-size:100px 100px;margin-top:38px;
	}
	.duihuan_box>div>div>div:nth-of-type(1) >p:nth-of-type(2){float:left;font-size:34px;color:#fff;text-indent:6px;width:calc(100% - 14px);}
	.duihuan_box>div>div>div:nth-of-type(2){font-size:12px;color:#fff;text-align:center;border:1px solid #fff;line-height:28px;margin:0 10px;border-radius:15px;}
	
	.duihuan_box>div>div:nth-of-type(2){width:270px;height:310px;margin:20px auto 0;background:url(__HOME__/img/duihuan_kuang.png) no-repeat;background-color:#e8eaf4;position:relative;}
	.duihuan_box>div>div:nth-of-type(2)>p{margin:0 16px;padding-top:20px;line-height:60px;border-bottom:1px dashed #325dd5;text-align:center;color:#5668e3;font-size:20px;font-weight:bold;}
	.duihuan_box>div>div:nth-of-type(2)>div{margin:80px auto 0;width:190px;height:40px;line-height:40px;}
	.duihuan_box>div>div:nth-of-type(2)>div>input{text-align:center;border:1px solid #c1c1c1;border-radius:5px;background-color:rgba(0,0,0,0);width:calc(100% - 2px);height:38px;font-size:18px;}
		/*兑换*/
	/*-- 支付——兑换 内容 --*/
	
	/* 弹窗 */
	.tc_style{position:fixed;z-index:99999;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.5);}
	.tc_style>div{
		position:absolute;top:calc(50% - 170px);left:calc(50% - 140px);width:280px;height:340px;background:url(__HOME__/img/hong_quan_bg.png) no-repeat;background-size:840px 340px;}
	
	.tc_style>div>div:nth-of-type(2){
		background:url(__HOME__/img/tubiao_02.png) no-repeat;background-size:100px 100px;background-position-Y:-32px;width:40px;height:40px;
		bottom:-50px;left:calc(50% - 20px);position:absolute;
	}
	/* 弹窗 */
	/* 红包弹窗 */
	.hongbao_tc{display:none;color:#fff;}
	.hongbao_tc ul>li:nth-of-type(1){padding:20px;line-height:20px;font-size:14px;text-align:center;}
	
	.hongbao_tc ul>li:nth-of-type(2){padding-top:50px;font-size:14px;text-indent:40px;}
	
	.hongbao_tc ul>li:nth-of-type(3){padding:10px 0 0 40px;height:36px;}
	.hongbao_tc ul>li:nth-of-type(3)>input{
		width:166px;border:1px solid #fff;display:block;float:left;height:34px;border-radius:5px;background-color:rgba(255,255,255,0);
		outline:none;transition:.2s;text-align:center;color:#fff;
	}
	.hongbao_tc ul>li:nth-of-type(3)>input:hover{background-color:rgba(255,255,255,.2);}
	.hongbao_tc ul>li:nth-of-type(3)>div{width:calc(100% - 168px);float:left;height:36px;text-indent:5px;font-size:12px;line-height:36px;}
	
	.hongbao_tc ul>li:nth-of-type(4){width:140px;height:40px;margin:50px auto 0;}
	.hongbao_tc ul>li:nth-of-type(4)>button{border:none;width:100%;height:40px;line-height:40px;background-color:#ef412f;border-radius:5px;text-align:center;font-size:18px;color:#fff;}
	/* 红包弹窗 */
	/* 优惠券弹窗 */
	.youhuiqu_tc{display:none;color:#fff;}
	.youhuiqu_tc>div{background-position-X:-280px;}
	.youhuiqu_tc>div>div>p{padding:20px;line-height:20px;font-size:14px;text-align:center;}
	.youhuiqu_tc ul{padding:16px;height:228px;overflow:auto;}
	.youhuiqu_tc ul>li{background:url(__HOME__/img/quan_yang.png) no-repeat;width:248px;height:70px;margin-bottom:9px;background-size:248px 70px;}
	
	.quan_style>div:nth-of-type(1){float:left;height:60px;width:142px;padding:5px 10px;}
	.quan_style>div:nth-of-type(1)>p:nth-of-type(1){color:#ff3d59;font-size:14px;line-height:28px;font-weight:bold;}
	.quan_style>div:nth-of-type(1)>p:nth-of-type(2){color:#858585;font-size:12px;line-height:16px;}
	
	.quan_style>div:nth-of-type(2){float:left;height:60px;width:66px;padding:5px 10px;}
	.quan_style>div:nth-of-type(2)>p:nth-of-type(1){font-size:18px;text-align:center;color:#ff3d59;line-height:34px;}
	.quan_style>div:nth-of-type(2)>p:nth-of-type(2){height:20px;background-color:#ff3d59;text-align:center;font-size:12px;line-height:20px;border-radius:10px;}
	/* 优惠券弹窗 */
	/* 积分弹窗 */
	.jifen_tc{display:none;color:#fff;}
	.jifen_tc>div{background-position-X:-560px;}
	
	.jifen_tc ul>li:nth-of-type(1){width:60px;margin:0 auto;line-height:30px;padding-top:10px;font-size:16px;}
	.jifen_tc ul>li:nth-of-type(1)>div{float:left;width:14px;height:14px;background:url(__HOME__/img/tubiao_02.png);background-position-X:-14px;background-size:100px 100px;margin-top:8px;}
	.jifen_tc ul>li:nth-of-type(1)>p{float:left;width:calc(100% - 14px);text-indent:6px;}
	
	.jifen_tc ul>li:nth-of-type(2){text-align:center;line-height:30px;}
	
	.jifen_tc ul>li:nth-of-type(3){padding:10px 0 0 40px;height:36px;}
	.jifen_tc ul>li:nth-of-type(3)>input{width:166px;border:1px solid #fff;display:block;float:left;height:34px;border-radius:5px;background-color:rgba(255,255,255,0);
		outline:none;transition:.2s;text-align:center;color:#fff;}
	.jifen_tc ul>li:nth-of-type(3)>input:hover{background-color:rgba(255,255,255,.2);}
	.jifen_tc ul>li:nth-of-type(3)>label{display:block;width:calc(100% - 168px);float:left;height:36px;text-indent:5px;font-size:12px;line-height:36px;}
	
	.jifen_tc ul>li:nth-of-type(4){text-align:center;color:#454545;font-size:20px;margin-top:50px;}
	.jifen_tc ul>li:nth-of-type(4)>span{font-size:40px;color:#a92929;}
	
	.jifen_tc ul>li:nth-of-type(5){width:140px;height:40px;margin:50px auto 0;}
	.jifen_tc ul>li:nth-of-type(5) >button{border:none;width:100%;height:40px;line-height:40px;background-color:#5786df;border-radius:5px;text-align:center;font-size:18px;color:#fff;}
	/* 积分弹窗 */
	
	/*-- 支付 兑换 确认 --*/
	#zhi_dui_an{position:fixed;width:calc(100% - 10px);height:44px;line-height:44px;color:#fff;border-radius:5px;left:5px;bottom:5px;background-color:#5687de;text-align:center;font-size:18px;}
	/*-- 支付 兑换 确认 --*/
</style>
</head>

<body>
	<!-- 返回 -->
	<div class="ding_bg">
		<a href="{:url('index')}" class="fanhui"><div></div></a>
		<p>扫码支付</p>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 返回 -->
	<!-- 支 兑 按钮 -->
	<div class="zhidui_an">
		<div class="zhidui_an_xz">支付</div>
		<div>兑换</div>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 支 兑 按钮 -->
	<!-- 支付——兑换 内容 -->
	<div class="zhidui_cont">
		<!-- 支付 -->
		<div class="zhifu_box">
			<div>
				<ul>
					<li><div></div></li>
					<li class="shuru_jine">
						<p>支付金额：</p>
						<ol>
							<li>￥</li>
							<li><input type="number" placeholder="0"></li>
							<li class="clear_jine"><div></div></li>
							<h6 class="clearfix"></h6>
						</ol>
					</li>
					<li class="hb_yhq_jf">
						<ol>
							<li>
								<div></div>
								<p>红包</p>
								<div style="color:#c94949;">-￥10</div>
								<h6 class="clearfix"></h6>
							</li>
							<li>
								<div style="background-position-X:-18px;"></div>
								<p>优惠券</p>
								<div>暂无</div>
								<h6 class="clearfix"></h6>
							</li>
							<li>
								<div style="background-position-X:-36px;"></div>
								<p>积分</p>
								<div>2965</div>
								<h6 class="clearfix"></h6>
							</li>
						</ol>
					</li>
					<li>实际支付：￥<span>99</span></li>
				</ul>
			</div>
		</div>
		<!-- 支付 -->
		<!-- 兑换 -->
		<div class="duihuan_box" style="display:none;">
			<div>
				<div>
					<div>
						<p></p>
						<p>2147</p>
						<h6 class="clearfix"></h6>
					</div>
					<div>当前您的积分为2147，可对商家制定商品进行积分兑换</div>
				</div>
				<div>
					<p>欢迎使用积分兑换</p>
					<div>
						<input type="text" placeholder="输入您兑换积分">
					</div>
				</div>
			</div>
		</div>
		<!-- 兑换 -->
		<h6 class="clearfix"></h6>
	</div>
	<!-- 支付——兑换 内容 -->
	<!-- 红包弹窗 -->
	<div class="hongbao_tc tc_style">
		<div>
			<div>
				<ul>
					<li>您已有价值<span>6</span>元红包了<br>赶快使用吧！</li>
					<li>输入您要使用的红包数</li>
					<li>
						<input type="text">
						<div>
							<input type="checkbox">
							全选
						</div>
						<h6 class="clearfix"></h6>
					</li>
					<li><button>确定</button></li>
				</ul>
			</div>
			<div class="off_hb_tc"></div>
		</div>
	</div>
	<!-- 红包弹窗 -->
	<!-- 优惠券弹窗 -->
	<div class="youhuiqu_tc tc_style">
		<div>
			<div>
				<p>您已经有这么多优惠券了<br>赶快使用吧！</p>
				<ul>
					<li class="quan_style">
						<div>
							<p>新手专享特权体验金</p>
							<p>
								<span>新手专享特权体验金</span><br>
								<span>2018.6.30过期</span>
							</p>
						</div>
						<div>
							<p>2888元</p>
							<p>立即使用</p>
						</div>
						<h6></h6>
					</li>
					<li class="quan_style">
						<div>
							<p>新手专享特权体验金</p>
							<p>
								<span>新手专享特权体验金</span><br>
								<span>2018.6.30过期</span>
							</p>
						</div>
						<div>
							<p>2888元</p>
							<p>立即使用</p>
						</div>
						<h6></h6>
					</li>
					<li class="quan_style">
						<div>
							<p>新手专享特权体验金</p>
							<p>
								<span>新手专享特权体验金</span><br>
								<span>2018.6.30过期</span>
							</p>
						</div>
						<div>
							<p>2888元</p>
							<p>立即使用</p>
						</div>
						<h6></h6>
					</li>
					<li class="quan_style">
						<div>
							<p>新手专享特权体验金</p>
							<p>
								<span>新手专享特权体验金</span><br>
								<span>2018.6.30过期</span>
							</p>
						</div>
						<div>
							<p>2888元</p>
							<p>立即使用</p>
						</div>
						<h6></h6>
					</li>
				</ul>
			</div>
			<div class="off_yhq_tc"></div>
		</div>
	</div>
	<!-- 优惠券弹窗 -->
	<!-- 积分弹窗 -->
	<div class="jifen_tc tc_style">
		<div>
			<div>
				<ul>
					<li>
						<div></div>
						<p>2147</p>
						<h6 class="clearfix"></h6>
					</li>
					<li>输入您要抵扣的积分数</li>
					<li>
						<input type="text">
						<label for="">
							<input type="checkbox">
							全选
						</label>
						<h6 class="clearfix"></h6>
					</li>
					<li>可抵扣<span>9</span>元</li>
					<li><button>确定</button></li>
				</ul>
			</div>
			<div class="off_jf_tc"></div>
		</div>
	</div>
	<!-- 积分弹窗 -->
	
	<!-- 支付 兑换 确认 -->
	<div id="zhi_dui_an">
		支付
	</div>
	<!-- 支付 兑换 确认 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
	$(".zhidui_an>div").click(function(){
		var an_ind = $(this).index();
		$(".zhidui_an_xz").removeClass("zhidui_an_xz");
		$(this).addClass("zhidui_an_xz");
		if(an_ind === 0){
			$("#zhi_dui_an").text("支付");
			$(".duihuan_box").hide();
			$(".zhifu_box").show();
		}else if(an_ind === 1){
			$("#zhi_dui_an").text("兑换");
			$(".zhifu_box").hide();
			$(".duihuan_box").show();
		}
	})
	
	$(".clear_jine").click(function(){
		$(this).siblings("li").find("input").val("");
	})
	$(".hb_yhq_jf>ol>li").click(function(){
		var a = $(this).index();
		if(a === 0){
			$(".hongbao_tc").show();
		}else if(a === 1){
			$(".youhuiqu_tc").show();
		}else if(a === 2){
			$(".jifen_tc").show();
		}
	});
	$(".off_hb_tc").click(function(){
		$(".hongbao_tc").hide();
	})
	$(".off_yhq_tc").click(function(){
		$(".youhuiqu_tc").hide();
	})
	$(".off_jf_tc").click(function(){
		$(".jifen_tc").hide();
	})
</script>
</html>
